<script lang="ts">
interface SkeletionTypes {
  text: {
    length: number;
  };
  rect: {
    width: number;
    height: number;
    size: number;
  };
  circle: {
    size: number;
  };
}

function getSize(size: number | string) {
  return typeof size === 'number' ? `${size}px` : size;
}
</script>

<script setup lang="ts">
defineOptions({
  inheritAttrs: false,
});
const props = withDefaults(defineProps<{
  type?: keyof SkeletionTypes;
  width?: number | string;
  height?: number | string;
  size?: number | string;
  length?: number;
}>(), {
  width: 'auto',
  height: 42,
  length: 10,
});

const rectCss = computed(() => ({
  width: getSize(props.size || props.width),
  height: getSize(props.size || props.height),
}));
const circleCss = computed(() => ({
  width: getSize(props.size ?? 42),
  height: getSize(props.size ?? 42),
  borderRadius: '50%',
}));
</script>

<template>
  <div v-if="$props.type === 'text'" v-bind="$attrs" class="text-3 leading-6">
    <span class="skeleton-color break-all rounded-full box-decoration-clone">
      <template v-for="i of $props.length" :key="i">口</template>
    </span>
  </div>
  <div v-else-if="$props.type === 'rect'" v-bind="$attrs" class="skeleton-color rounded-2" :style="rectCss" />
  <div v-else-if="$props.type === 'circle'" v-bind="$attrs" class="skeleton-color rounded-2" :style="circleCss" />
  <div v-else v-bind="$attrs" class="animate-scan select-none break-all text-transparent" tabindex="0" :aria-hidden="true">
    <slot />
  </div>
</template>

<style lang="scss" scoped>
.skeleton-color {
  --_skeleton-color: var(--skeleton-color, #3e404c);
  background-color: var(--_skeleton-color);
}

.animate-scan {
  mask-image: linear-gradient(
    -50deg,
    #0006,
    #0006 47%,
    #000c,
    #0006 53%,
    #0006
  );
  // mask-image: linear-gradient(
  //   -50deg,
  //   rgba(0, 0, 0, 0),
  //   rgba(0, 0, 0, 0.4) 8%,
  //   rgba(0, 0, 0, 1) 10%,
  //   rgba(0, 0, 0, 0.4) 12%,
  //   rgba(0, 0, 0, 0.4) 28%,
  //   rgba(0, 0, 0, 1) 30%,
  //   rgba(0, 0, 0, 0.4) 32%,
  //   rgba(0, 0, 0, 0.4) 48%,
  //   rgba(0, 0, 0, 1) 50%,
  //   rgba(0, 0, 0, 0.4) 52%,
  //   rgba(0, 0, 0, 0.4) 68%,
  //   rgba(0, 0, 0, 1) 70%,
  //   rgba(0, 0, 0, 0.4) 72%,
  //   rgba(0, 0, 0, 0.4) 88%,
  //   rgba(0, 0, 0, 1) 90%,
  //   rgba(0, 0, 0, 0.4) 92%,
  //   rgba(0, 0, 0, 0)
  // );
  mask-size: 400% 100%;
  animation:
    // pulse 0.5s linear infinite alternate,
    scann 0.7s linear infinite;

  @keyframes scann {
    0% {
      mask-position: 90% 0;
    }
    100% {
      mask-position: 10% 0;
    }
  }
}

.animate-pulse {
  animation: pulse 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}
</style>
